<template>
  <!--面包屑导航-->
    <el-row style="margin: 5px 5px;">
        <el-col :span="24">
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>设备管理</el-breadcrumb-item>
                <el-breadcrumb-item>设备类型</el-breadcrumb-item>
            </el-breadcrumb>
        </el-col>
    </el-row>
  <!--查询条件区-->
    <el-row style="margin: 5px 5px;">
        <el-col :span="24">
            <el-form v-model="searchDeviceType" style="margin: 15px 0px 0px 0px" inline>
                <el-form-item label="类型名称">
                    <el-input v-model="searchDeviceType.deviceTypeName"/>
                </el-form-item>
                <!--项目状态设置-->
                <el-form-item label="任务状态">
                    <el-select placeholder="全部" style="width: 100px;" v-model="searchDeviceType.deviceTypeStatus">
                        <el-option label="全部" :value="0"/>
                        <el-option label="启用" :value="1"/>
                        <el-option label="禁用" :value="2"/>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="searchDT" type="primary">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="cleanSearch">重置</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="deviceTypeDialogInsertShow = true" type="success">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
  <!--表格主体-->
    <el-row style="margin: 5px 5px;">
        <el-col :span="24">
            <el-table
                    :data="deviceTypeList"
                    border
                    stripe
                    row-key="deviceTypeId"
                    lazy
                    :load="loadChildrenTask"
                    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                    ref="taskTable"
                    @selection-change="changeSelection"
            >
                <el-table-column align="center" width="150" prop="deviceTypeId" label="设备类型编号"/>
                <el-table-column align="center" prop="deviceTypeName" label="设备类型名称"/>
                <el-table-column align="center" width="150" prop="deviceTypeStatus" label="类似是否可用">
                    <template #default="scope">
                        <el-tag type="primary" v-if="scope.row.deviceTypeStatus == 1">是</el-tag>
                        <el-tag type="warning" v-else>否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="deviceTypeNotes" label="设备类型备注"/>
                <el-table-column align="center" label="操作">
                    <template #default="scope">
                        <el-row>
                            <el-col :span="8">
                                <el-link @click="updateLineDeviceType(scope.row.deviceTypeId)" type="primary">
                                    <el-icon>
                                        <EditPen/>
                                    </el-icon>
                                    修改
                                </el-link>
                            </el-col>
                            <el-col :span="8">
                                <el-link @click="lineInsertNewDeviceType(scope.row.deviceTypeId)" type="primary">
                                    <el-icon>
                                        <Plus/>
                                    </el-icon>
                                    新增
                                </el-link>
                            </el-col>
                            <el-col :span="8">
                                <el-link @click="deleteDeviceType(scope.row.deviceTypeId)" type="primary">
                                    <el-icon>
                                        <DeleteFilled/>
                                    </el-icon>
                                    删除
                                </el-link>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
  <!--新增弹窗-->
    <el-dialog
            v-model="deviceTypeDialogInsertShow"
            title="新增设备类型"
    >
        <el-form v-model="insertDeviceType" label-width="auto">
            <el-form-item label="类型名称">
                <el-input v-model="insertDeviceType.deviceTypeName"/>
            </el-form-item>
            <el-form-item label="类型状态">
                <el-select placeholder="启用" style="width: 100px;" v-model="insertDeviceType.deviceTypeStatus">
                    <el-option label="启用" :value="1"/>
                    <el-option label="禁用" :value="2"/>
                </el-select>
            </el-form-item>
            <el-form-item label="类型备注">
                <el-input type="textarea" v-model="insertDeviceType.deviceTypeNotes"/>
            </el-form-item>
            <el-form-item label="是否存在父类">
                <el-switch v-model="insertDeviceType.hasParent"/>
            </el-form-item>
            <el-form-item label="父设备类型">
                <el-select v-model="insertDeviceType.deviceTypeParentId">
                    <template v-for="fatherOption in allFatherOptions">
                        <el-option :label="fatherOption.deviceTypeName" :value="fatherOption.deviceTypeId"/>
                    </template>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="insertNewDeviceType" type="primary">提交</el-button>
                <el-button @click="cancelInsert">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
  <!--跟新数据弹窗-->
    <el-dialog
            v-model="deviceTypeDialogUpdateShow"
            title="跟新设备类型"
    >
        <el-form v-model="updateDeviceType" label-width="auto">
            <el-form-item label="类型名称">
                <el-input v-model="updateDeviceType.deviceTypeName"/>
            </el-form-item>
            <el-form-item label="类型状态">
                <el-select placeholder="启用" style="width: 100px;" v-model="updateDeviceType.deviceTypeStatus">
                    <el-option label="启用" :value="1"/>
                    <el-option label="禁用" :value="2"/>
                </el-select>
            </el-form-item>
            <el-form-item label="类型备注">
                <el-input type="textarea" v-model="updateDeviceType.deviceTypeNotes"/>
            </el-form-item>
            <el-form-item label="是否存在父类">
                <el-switch v-model="updateDeviceType.hasParent"/>
            </el-form-item>
            <el-form-item label="父设备类型">
                <el-select v-model="updateDeviceType.deviceTypeParentId">
                    <template v-for="fatherOption in allFatherOptions">
                        <el-option :label="fatherOption.deviceTypeName" :value="fatherOption.deviceTypeId"/>
                    </template>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="updateNewDeviceType" type="primary">提交</el-button>
                <el-button @click="cancelUpdate">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup>
import {ArrowRight} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import device from "@/api/device/deviceType.js";
import {ElMessage, ElMessageBox} from "element-plus";
//封装新增弹窗显示
let deviceTypeDialogInsertShow = ref(false)
//封装跟新弹窗显示
let deviceTypeDialogUpdateShow = ref(false)
//封装查询数据
let searchDeviceType = ref({});
//封装数据类型数据
let deviceTypeList = ref([]);
//封装子查询数据
let childrenSearch = ref({});
// 封装新增设备类型
let insertDeviceType = ref({});
//封装所有的父类设备类型
let allFatherOptions = ref([])
//封装跟新的设备类型
let updateDeviceType = ref({})


/**
 * 删除设备类别
 * @param deviceTypeId
 */
function deleteDeviceType(deviceTypeId) {
    ElMessageBox.confirm(
        '你确定要删除设备类别吗',
        '删除项目',
        {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'error'
        }
    ).then(() => {
        device.deleteDeviceType(deviceTypeId, res => {
            if (res.code == 1) {
                ElMessage({
                    type: "success",
                    message: "删除成功"
                })
                loadDeviceTypes("F")
            } else if (res.code == 300) {
                ElMessage({
                    type: "warning",
                    message: "该类别存在子类无法删除"
                })
            } else {
                ElMessage({
                    type: "error",
                    message: "网络开了小差，请稍后重试"
                })
            }
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除'
        })
    })
}

/**
 *  提交跟新结果
 */
function updateNewDeviceType() {
    updateDeviceType.value.hasChildren = undefined
    device.updateDeviceType(updateDeviceType.value, res => {
        if (res.code == 1) {
            ElMessage({
                type: "success",
                message: "跟新成功"
            })
            loadDeviceTypes('F');
            cancelUpdate();
        } else if (res.code == 300) {
            ElMessage({
                type: "warning",
                message: "类型重复"
            })
        } else {
            ElMessage({
                type: "error",
                message: "添加失败"
            })
        }
    })
}

/**
 * 打开跟新窗口并将后台数据显示
 * @param deviceTypeId
 */
function updateLineDeviceType(deviceTypeId) {
    device.loadUpdateInfo(deviceTypeId, res => {
        if (res.data.deviceTypeParent == 1) {
            updateDeviceType.value.hasParent = true;
        }
        updateDeviceType.value = res.data
    })
    deviceTypeDialogUpdateShow.value = true
}

/**
 * 取消跟新
 */
function cancelUpdate() {
    updateDeviceType = new ref({})
    deviceTypeDialogUpdateShow.value = false;
}

/**
 * 行新增
 * @param deviceTypeId
 */
function lineInsertNewDeviceType(deviceTypeId) {
    insertDeviceType.value.hasParent = true
    insertDeviceType.value.deviceTypeParentId = deviceTypeId
    deviceTypeDialogInsertShow.value = true
}

/**
 * 添加新的设备类型
 */
function insertNewDeviceType() {
    if (insertDeviceType.value.hasParent) {
        insertDeviceType.value.deviceTypeParent = 1;
    } else {
        insertDeviceType.value.deviceTypeParent = 0;
        insertDeviceType.value.deviceTypeParentId = "F";
    }
    if (insertDeviceType.value.hasParent) {
        if (insertDeviceType.value.deviceTypeParentId == undefined || insertDeviceType.value.deviceTypeName == undefined || insertDeviceType.value.deviceTypeStatus == undefined) {
            ElMessage({
                type: "error",
                message: "缺少关键元素"
            })
            throw new Error("缺少关键元素")
        }
    }
    if (insertDeviceType.value.deviceTypeName == undefined || insertDeviceType.value.deviceTypeStatus == undefined) {
        ElMessage({
            type: "error",
            message: "缺少关键元素"
        })
        throw new Error("缺少关键元素")
    }
    device.insertNewDeviceType(insertDeviceType.value, res => {
        if (res.code == 1) {
            ElMessage({
                type: "success",
                message: "添加成功"
            })
            loadDeviceTypes('F');
            cancelInsert();
        } else {
            ElMessage({
                type: "error",
                message: "添加失败"
            })
        }
    })
}

/**
 * 关闭新增弹窗
 */
function cancelInsert() {
    insertDeviceType.value = new ref({})
    deviceTypeDialogInsertShow.value = false
}

/**
 * 查询条件创建
 */
function searchDT() {
    insertDeviceType.value.deviceTypeParent = 0;
    loadDeviceTypes("F");
}

/**
 * 查询操作
 */
function cleanSearch() {
    searchDeviceType.value.deviceTypeName = undefined;
    searchDeviceType.value.deviceTypeStatus = 0;
    loadDeviceTypes("F");
}

/**
 * 加载子设备类型
 */
function loadChildrenTask(deviceType, node, resole) {
    childrenSearch.value = searchDeviceType.value
    childrenSearch.value.deviceTypeParent = 1
    childrenSearch.value.deviceTypeParenId = deviceType.deviceTypeId
    device.loadDeviceTypeChildrenList(childrenSearch.value, res => {
        resole(res.data)
    })
}

function loadDeviceTypes(parentId) {
    if (!parentId) {
        searchDeviceType.value.deviceTypeParent = 0
    }
    searchDeviceType.value.deviceTypeParenId = parentId;
    device.loadDeviceTypeList(searchDeviceType.value, res => {
        deviceTypeList.value = res.data
    })
}

onMounted(() => {
    loadDeviceTypes("F")
    device.loadAllOptions(res => {
        allFatherOptions.value = res.data
    })
})
</script>

<style scoped>

</style>